<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <!-- 用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <script type="text/javascript">
      var flag = {
        "email":false,
        "username":false,
        "nickname":false,
        "password":false,
      };

      $(function(){
        // email验证
        $("#txtEmail").blur(function(){
          var email = $(this).val();

          var pattern=/\b(^['_A-Za-z0-9-]+(\.['_A-Za-z0-9-]+)*@([A-Za-z0-9-])+(\.[A-Za-z0-9-]+)*((\.[A-Za-z0-9]{2,})|(\.[A-Za-z0-9]{2,}\.[A-Za-z0-9]{2,}))$)\b/;
          if(!pattern.test(email)){
            $("#email\\.info").html("Email格式不正确");
            return;
          }else{
            $("#email\\.info").html("");
            flag.email = true;
          }

          // 邮箱重复校验
        });

        $("#txtUserName").blur(function(){
          // 用户名校验
          var username = $(this).val();

          // 校验规则，可调整
          var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
          if(!pattern.test(username)){
            $("#username\\.info").html("用户名不合法");
            return;
          }else{
            $("#username\\.info").html("");
            flag.username = true;
          }
        });

        $("#txtxjxName").blur(function(){
          // 用户名校验
          var username = $(this).val();

          // 校验规则，可调整
          var pattern = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
          if(!pattern.test(username)){
            $("#xjxname\\.info").html("手机号不存在");
            return;
          }else{
            $("#xjxname\\.info").html("");
            flag.xjxname = true;
          }
        });

        $("#txtNickName").blur(function(){
          // 昵称校验
          var nickname = $(this).val();

          // 校验规则，可调整
          var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
          if(!pattern.test(nickname)){
            $("#nickname\\.info").html("昵称不合法");
            return;
          }else{
            $("#nickname\\.info").html("");
            flag.nickname = true;
            return;
          }
        });

        // 密码校验
        $("#txtPassword").blur(function(){
          var password=$(this).val();

          var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
          if (!pattern.test(password)) {
            $("#password\\.info").html("密码格式不正确");
            return;
          }else{
            $("#password\\.info").html("");
            //flag.password=true;
            return;
          }
        });


        // 密码重复校验
        $("#txtRepeatPass").blur(function(){
          var repeatPass = $(this).val();

          var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/;
          if (repeatPass!=$("#txtPassword").val()) {
            $("#repeatPass\\.info").html("两次密码输入不一致");
            return;
          }else{
            $("#repeatPass\\.info").html("");
            flag.password = true;
            return;
          }
        });



      })
    </script>
    <link rel="stylesheet" href="../css/xie.css">
</head>

<body>
<header><img src="../img/logo.png"></header>
<div class="validation">
<form class="form-horizontal" action="landing.html" role="form" method="post" id="form">
    <p class="huanYing">欢迎使用</p>
    <div class="form-group">
        <label for="uname" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="txtUserName" name="username"
                   placeholder="请输入用户名" required>
            <span id="username.info" style="color:red"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="passwd" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-6">
            <input type="password" class="form-control" name="password" id="txtPassword"
                   placeholder="请输入密码" required>
            <span id="password.info" style="color:red"></span>
        </div>
    </div>

    <div class="form-group">
        <label for="repeatPass" class="col-sm-2 control-label">重复密码</label>
        <div class="col-sm-6">
            <input type="password" class="form-control" name="repeatPass" id="txtRepeatPass"
                   placeholder="请再次输入密码" required>
            <span id="repeatPass.info" style="color:red" ></span>
        </div>
    </div>

    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">注册邮箱</label>
        <div class="col-sm-6">
            <input name="email" type="text" class="form-control" id="txtEmail"
                   placeholder="请输入注册邮箱" required>
            <span id="email.info" style="color:red"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="uname" class="col-sm-2 control-label">手机号</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="txtxjxName" name="username"
                   placeholder="请输入您的手机号" required>
            <span id="xjxname.info" style="color:red"></span>
        </div>
    </div>

    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">公司名称</label>
        <div class="col-sm-6">
            <input name="email" type="text" class="form-control"
                   placeholder="请输入你的公司" required>
            <span style="color:red"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">验证码</label>
        <div class="col-sm-6 dingWei">
            <input name="email" type="text" class="form-control"
                   placeholder="写出图中验证码" required>
            <span class="fr"><img src="../img/注册页_03.png"></span>
            <a>换一张</a>
        </div>
    </div>
    <div class="form-group1">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">同意协议并注册</button>
          <p>  <span class="fl"><a>《海运互通网络管理协议》</a></span></p>
        </div>
    </div>
</form>
</div>
</body>
</html>